<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入jquery -->
<script type="text/javascript"
	th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript"
	th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>


	<script type="text/javascript">
		var chartDom = document.getElementById('container');
		var myChart = echarts.init(chartDom);
		var option;

		var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

		var updateFrequency = 2000;
		var dimension = 0;

		var countryColors = {"Australia":"#00008b","Canada":"#f00","China":"#ffde00","Cuba":"#002a8f","Finland":"#003580","France":"#ed2939","Germany":"#000","Iceland":"#003897","India":"#f93","Japan":"#bc002d","North Korea":"#024fa2","South Korea":"#000","New Zealand":"#00247d","Norway":"#ef2b2d","Poland":"#dc143c","Russia":"#d52b1e","Turkey":"#e30a17","United Kingdom":"#00247d","United States":"#b22234"};

		$.when(
		    $.getJSON('https://cdn.jsdelivr.net/npm/emoji-flags@1.3.0/data.json'),
		    $.getJSON(ROOT_PATH + '/data/asset/data/life-expectancy-table.json')
		).done(function (res0, res1) {
		    var flags = res0[0];
		    var data = res1[0];
		    var years = [];
		    for (var i = 0; i < data.length; ++i) {
		        if (years.length === 0 || years[years.length - 1] !== data[i][4]) {
		            years.push(data[i][4]);
		        }
		    }

		    function getFlag(countryName) {
		        if (!countryName) {
		            return '';
		        }
		        return (flags.find(function (item) {
		            return item.name === countryName;
		        }) || {}).emoji;
		    }
		    var startIndex = 10;
		    var startYear = years[startIndex];

		    var option = {
		        grid: {
		            top: 10,
		            bottom: 30,
		            left: 150,
		            right: 80
		        },
		        xAxis: {
		            max: 'dataMax',
		            label: {
		                formatter: function (n) {
		                    return Math.round(n);
		                }
		            }
		        },
		        dataset: {
		            source: data.slice(1).filter(function (d) {
		                return d[4] === startYear;
		            })
		        },
		        yAxis: {
		            type: 'category',
		            inverse: true,
		            max: 10,
		            axisLabel: {
		                show: true,
		                textStyle: {
		                    fontSize: 14
		                },
		                formatter: function (value) {
		                    return value + '{flag|' + getFlag(value) + '}';
		                },
		                rich: {
		                    flag: {
		                        fontSize: 25,
		                        padding: 5
		                    }
		                }
		            },
		            animationDuration: 300,
		            animationDurationUpdate: 300
		        },
		        series: [{
		            realtimeSort: true,
		            seriesLayoutBy: 'column',
		            type: 'bar',
		            itemStyle: {
		                color: function (param) {
		                    return countryColors[param.value[3]] || '#5470c6';
		                }
		            },
		            encode: {
		                x: dimension,
		                y: 3
		            },
		            label: {
		                show: true,
		                precision: 1,
		                position: 'right',
		                valueAnimation: true,
		                fontFamily: 'monospace'
		            }
		        }],
		        // Disable init animation.
		        animationDuration: 0,
		        animationDurationUpdate: updateFrequency,
		        animationEasing: 'linear',
		        animationEasingUpdate: 'linear',
		        graphic: {
		            elements: [{
		                type: 'text',
		                right: 160,
		                bottom: 60,
		                style: {
		                    text: startYear,
		                    font: 'bolder 80px monospace',
		                    fill: 'rgba(100, 100, 100, 0.25)'
		                },
		                z: 100
		            }]
		        }
		    };

		    // console.log(option);
		    myChart.setOption(option);

		    for (var i = startIndex; i < years.length - 1; ++i) {
		        (function (i) {
		            setTimeout(function () {
		                updateYear(years[i + 1]);
		            }, (i - startIndex) * updateFrequency);
		        })(i);
		    }

		    function updateYear(year) {
		        var source = data.slice(1).filter(function (d) {
		            return d[4] === year;
		        });
		        option.series[0].data = source;
		        option.graphic.elements[0].style.text = year;
		        myChart.setOption(option);
		    }
		})

		option && myChart.setOption(option);

	</script>
</body>
</html>